<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../js/nav.js"></script>
  <style>
    /* 公司介绍 */
    .container {
      width: 1312px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 20px auto;
    }

    .left-box {
      flex: 1;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      margin-right: 20px;

    }

    .left-box h6 {
      color: #088178 !important;
      font-size: 14px;
      margin-bottom: 15px !important;
      text-transform: uppercase !important;
      font-family: "Spartan", sans-serif;
      font-weight: 600;
      line-height: 1.2;
    }

    .left-box h1 {
      margin-bottom: 40px;
      font-size: 36px;
      font-family: "Spartan", sans-serif;
      color: #222222;
      font-weight: 600;
      line-height: 1.2;
    }

    .left-box p {
      font-size: 1rem;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 5px;
      color: #465b52;
    }


    .right-box {
      flex: 1;
      padding: 20px;
      background-color: #f5f5f5;
      border-radius: 8px;
      overflow: hidden;
      /* 防止图片溢出盒子 */
      height: 324px;
    }

    .right-box img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }

    /* 团队介绍 */
    .container-team {
      width: 1312px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
      margin: 20px auto;
      background-color: #fff;
    }

    .left-box-team h6 {
      color: #088178 !important;
      font-size: 14px;
      margin-bottom: 15px !important;
      text-transform: uppercase !important;
      font-family: "Spartan", sans-serif;
      font-weight: 600;
      line-height: 1.2;
    }

    .left-box-team h1 {
      margin-bottom: 20px !important;
      font-size: 36px;
      font-family: "Spartan", sans-serif;
      color: #222222;
      font-weight: 600;
      line-height: 1.2;
    }

    .left-box-team p {
      font-size: 1rem;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 5px;
      color: #465b52;
    }

    .right-box-team {
      flex: 1;
      padding: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: #fff;
    }

    .right-box-team button {
      display: inline-block;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 700;
      padding: 12px 30px;
      border-radius: 4px;
      color: #088178 !important;
      border: 1px solid #046963;
      background-color: #ffffff;
      cursor: pointer;
      -webkit-transition: all 300ms linear 0s;
      transition: all 300ms linear 0s;
      letter-spacing: 0.5px;
    }

    /* 团队成员 */
    .container-member {
      width: 1312px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: #fff;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
      border-radius: 8px;
      margin: 0 auto;
    }

    .container-member .box {
      flex: 1;
      margin: 10px;
      /* padding: 20px; */
      /* background-color: #f5f5f5; */
      border-radius: 8px;
      text-align: center;
    }

    .container-member img {
      width: 100%;

      object-fit: cover;
      /* 保持图片比例并填充整个容器 */
      border-radius: 8px;
      /* 圆角只应用在图片的上边框 */
    }

    .container-member .bottom-content {
      padding: 15px;
    }

    .container-member h4 {
      margin: 0;
      font-size: 18px;
      font-family: "Spartan", sans-serif;
      color: #222222;
      font-weight: 600;
      line-height: 1.2;
    }

    .container-member p {
      margin: 10px 0;
      font-size: 14px;
      color: #088178;
    }

    .container-member span {
      font-weight: bold;
      color: #3498db;
    }

    /* <!-- EVARA COPORATION --> */
    .container-coporation {
      width: 1312px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background-color: #fff;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
      border-radius: 8px;
      margin: 0 auto;
    }

    .left-box-item {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
    }

    .describe {
      text-align: center;
      font-size: 1rem;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 5px;
      color: #465b52;
    }

    /* SOME FACTS */
    .container-facts {
      width: 1312px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      padding: 20px;
      background-color: #fff;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
      border-radius: 8px;
      margin: 0 auto;
    }

    .container-facts .box {
      border: 1px solid #eee;
      flex: 0 0 calc(33.33% - 20px);
      margin: 10px;
      padding: 30px;
      background-color: #ffffff;
      border-radius: 8px;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items: start
    }

    .container-facts img {
      align-items: start;
      width: 79px;
      height: 86px;
      max-height: 150px;
      /* 控制图片高度 */
      object-fit: cover;
      /* 保持图片比例并填充整个容器 */
      border-radius: 8px;
      /* 圆角只应用在图片的上边框 */
    }

    .container-facts .info {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: space-evenly;
      text-align: start;
      margin-left: 10px;
    }

    .container-facts h5 {
      margin-bottom: 5px;
      font-size: 14px;
      font-family: "Spartan", sans-serif;
      color: #222222;
      font-weight: 600;
      line-height: 1.2;
    }

    .container-facts p {
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 5px;


    }

    /* 盒子向上位移 */
    .box {
      position: relative;
      /* overflow: hidden; */
    }

    .box img {
      transition: transform 0.3s ease;
      /* 添加平滑过渡效果 */
    }

    .box:hover img {
      transform: translateY(-10px);
      /* 向上位移10像素，根据需要调整值 */
    }
  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <img src="../img/logo/logo.svg" alt="">
  </div>
  <!-- 导航栏 -->
  <div>
    <nav id="navbar">
      <div>
        <a href="./index.html" class="nav-item" onclick="highlightNavItem(this,event)">首页</a>
        <a href="./category.html" class="nav-item" onclick="highlightNavItem(this,event)">商品分类</a>
        <a href="./new.html" class="nav-item" onclick="highlightNavItem(this,event)">每月上新</a>
        <a href="./hot.html" class="nav-item" onclick="highlightNavItem(this,event)">热销推荐</a>
        <a href="./service.html" class="nav-item" onclick="highlightNavItem(this,event)">在线客服</a>
        <a href="./about.html" class="nav-item" onclick="highlightNavItem(this,event)">关于我们</a>
      </div>
      <div class="icons">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/sousuo.png" alt="搜索">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/jushoucang.png" alt="收藏">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/gouwuche.png" alt="购物车">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/gerenzhongxin.png" alt="个人中心">
      </div>
    </nav>
  </div>

  <!-- 公司介绍 -->
  <div style="margin-top: 50px;" class="container">
    <div class="left-box">
      <h6>OUR COMPANY</h6>
      <h1>We are Building The Destination For Getting Things Done</h1>
      <p>Tempus ultricies augue luctus et ut suscipit. Morbi arcu, ultrices purus dolor erat bibendum sapien
        metus.<br />
        Tempus ultricies augue luctus et ut suscipit. Morbi arcu, ultrices purus dolor erat bibendum sapien metus. Sit
        mi, pharetra, morbi arcu id. Pellentesque dapibus nibh augue senectus.</p>
    </div>
    <div class="right-box">
      <img src="../img/about/about-1.png" alt="Your Image">
    </div>
  </div>
  <!-- 团队介绍 -->
  <div class="container-team">
    <div class="left-box-team">
      <h6>OUR TEAM</h6>
      <h1>Top team of experts</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione optio perferendis sequi mollitia quis autem ea
        cupiditate possimus!
      </p>
    </div>
    <div class="right-box-team">
      <button>更多成员</button>
    </div>
  </div>
  <!-- 团队成员 -->
  <div class="container-member">
    <div class="box">
      <img src="../img/about/avatar-1.jpg" alt="Image 1">
      <div class="bottom-content">
        <h4>Patric Adams</h4>
        <p>CEO & Co-Founder</p>
        <p>Contact: <span>123-456-7890</span></p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/avatar-2.jpg" alt="Image 2">
      <div class="bottom-content">
        <h4>Dilan Specter</h4>
        <p>Head Engineer</p>
        <p>Contact: <span>123-456-7890</span></p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/avatar-3.jpg" alt="Image 3">
      <div class="bottom-content">
        <h4>Tomas Baker</h4>
        <p>Senior Planner</p>
        <p>Contact: <span>123-456-7890</span></p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/avatar-4.jpg" alt="Image 4">
      <div class="bottom-content">
        <h4>Norton Mendos</h4>
        <p>Project Manager</p>
        <p>Contact: <span>123-456-7890</span></p>
      </div>
    </div>
  </div>
  <hr>
  <!-- EVARA COPORATION -->
  <div class="container-coporation">
    <div class="left-box">
      <div class="left-box-item">
        <h6>EVARA COPORATION</h6>
        <h1 style="margin-bottom: 20px;text-align: center;">Our main branches<br />
          around the world</h1>
        <p style="text-align: center;">At vero eos et accusamus et iusto odio dignissimos ducimus quiblanditiis
          praesentium. ebitis<br /> nesciunt voluptatum dicta reprehenderit accusamus</p>
      </div>
    </div>
  </div>
  <div class="container-member">
    <div class="box">
      <img src="../img/about/company-1.jpg" alt="Image 1">
      <div class="bottom-content">
        <h4>New York, USA</h4>
        <p class="describe">27 Division St, New York<br />
          NY 10002, USA</p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/company-2.jpg" alt="Image 2">
      <div class="bottom-content">
        <h4>Paris, France</h4>
        <p class="describe">22 Rue des Carmes<br />
          75005 Paris</p>

      </div>
    </div>
    <div class="box">
      <img src="../img/about/company-3.jpg" alt="Image 3">
      <div class="bottom-content">
        <h4>Jakarta, Indonesia</h4>
        <p class="describe">2476 Raya Yogyakarta,<br />
          89090 Indonesia</p>

      </div>
    </div>
  </div>
  <hr>
  <!-- SOME FACTS -->
  <div class="container-coporation">
    <div class="left-box">
      <div class="left-box-item">
        <h6>SOME FACTS</h6>
        <h1 style="margin-bottom: 20px;text-align: center;">Take a look what<br />
          our clients say about us</h1>
        <p style="text-align: center;">At vero eos et accusamus et iusto odio dignissimos ducimus quiblanditiis
          praesentium. ebitis<br /> nesciunt voluptatum dicta reprehenderit accusamus</p>
      </div>
    </div>
  </div>
  <div class="container-facts">
    <div class="box">
      <img src="../img/about/avatar-1.jpg" alt="Image 1">
      <div class="info">
        <h5>J. Bezos</h5>
        <p style=" color: #a2a2a2;">Adobe Jsc</p>
        <p style="color: #465b52;">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nesciunt voluptatum
          dicta reprehenderit accusamus voluptatibus voluptas."</p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/avatar-2.jpg" alt="Image 1">
      <div class="info">
        <h5>B.Gates</h5>
        <p style=" color: #a2a2a2;">Adobe Jsc</p>
        <p style="color: #465b52;">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nesciunt voluptatum
          dicta reprehenderit accusamus voluptatibus voluptas."</p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/avatar-3.jpg" alt="Image 1">
      <div class="info">
        <h5>B. Meyers</h5>
        <p style=" color: #a2a2a2;">Adobe Jsc</p>
        <p style="color: #465b52;">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nesciunt voluptatum
          dicta reprehenderit accusamus voluptatibus voluptas."</p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/avatar-4.jpg" alt="Image 1">
      <div class="info">
        <h5>J. Bezos</h5>
        <p style=" color: #a2a2a2;">Adobe Jsc</p>
        <p style="color: #465b52;">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nesciunt voluptatum
          dicta reprehenderit accusamus voluptatibus voluptas."</p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/avatar-5.jpg" alt="Image 1">
      <div class="info">
        <h5>B.Gates</h5>
        <p style=" color: #a2a2a2;">Adobe Jsc</p>
        <p style="color: #465b52;">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nesciunt voluptatum
          dicta reprehenderit accusamus voluptatibus voluptas."</p>
      </div>
    </div>
    <div class="box">
      <img src="../img/about/avatar-1.jpg" alt="Image 1">
      <div class="info">
        <h5>B. Meyers</h5>
        <p style=" color: #a2a2a2;">Adobe Jsc</p>
        <p style="color: #465b52;">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nesciunt voluptatum
          dicta reprehenderit accusamus voluptatibus voluptas."</p>
      </div>
    </div>

  </div>

  <script>

  </script>
</body>

</html>